<template>
    <div class="special-box">
        <AgreeHandler/>
        <HeaderTitle :title="title" style="width: 4rem"/>
        <div class="agree-list">
            <div class="agree-item side-card" v-for="item in agreeList" :key="item.title">
                <router-link :to="`/special/${item.id}`">
                    <img :src="item.cover" alt="not found">
                    <div class="title">{{ item.title }}</div>
                    <div class="user">
                        <img v-if="item.avatar" class="author-avatar" :src="item.avatar"
                             alt="author"/>
                        <img v-else class="author-avatar" src="@/assets/images/user/default-author.png"
                             alt="author"/>
                        <div class="user-nick">{{ item.nickname }}</div>
                    </div>
                    <div class="element">
                        <div class="view">
                            <svg-icon class="icon-v" icon-class="view" size="0.4rem"/>
                            <span style="font-size: 0.4rem;">{{ item.viewCount }}</span>
                        </div>
                        <div class="time-box">
                            <div class="time start-end">
                                开始时间：{{ item.timeStart }}
                                <span style="margin: 0 0.5rem"></span>
                                结束时间：{{ item.timeEnd }}
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
            <LoadA v-show="isLoading"></LoadA>
        </div>
    </div>
</template>

<script setup lang="ts">
import AgreeHandler from "./AgreeHandler.vue";
import {getAgreementList} from "@/api/agreement";
import useStore from "@/store";
import {Agreement, AgreementQuery} from "@/api/agreement/types";
import {useEventListener} from "@vueuse/core";

const {app} = useStore();

const agreeList = ref([] as Agreement[]);

const data = reactive({
    pageQuery: {
        type: app.specialFlag,
        pageNum: 1,
        pageSize: 10
    } as AgreementQuery,
    isLoading: true,
    total: 0,
    distance: 100,
});

const {pageQuery, isLoading, total, distance} = toRefs(data);

const title = computed(() => {
    return app.specialFlag === 1 ? "约会列表" :
        app.specialFlag === 2 ? "活动列表" : app.specialFlag === 3 ? "赛事列表" : "帮助列表";
});

/**
 * 滚动条距离屏幕底部的距离
 */
useEventListener(document, "scroll", () => {
    distance.value = Math.floor(document.documentElement.scrollHeight - window.innerHeight - window.scrollY);
});

watchEffect(() => {
    if (distance.value <= 90) {
        if (total.value < pageQuery.value.pageNum * pageQuery.value.pageSize) {
            return;
        }
        pageQuery.value.pageNum++;
        isLoading.value = true;
        getAgreeList();
    }
});

watch(() => app.specialFlag, () => {
    isLoading.value = true;
    agreeList.value = [];
    pageQuery.value.pageNum = 1;
    pageQuery.value.type = app.specialFlag;
    getAgreeList();
});

const getAgreeList = () => {
    getAgreementList(pageQuery.value).then(({data}) => {
        if (data.code === 200) {
            agreeList.value.push(...data.rows);
            total.value = data.total;
            isLoading.value = false;
        }
    });
}

onMounted(() => {
    getAgreeList();
})
</script>

<style scoped lang="scss">
.special-box {
  width: 100%;

  .agree-list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;

    .agree-item {
      width: 8rem;
      height: 5.8rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 3rem;
        border-radius: 0.2rem;
        object-fit: cover;
        box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow);
      }

      .title {
        width: 100%;
        text-align: center;
        color: var(--main-1);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .user {
        width: 100%;
        display: flex;
        justify-content: left;
        align-items: center;

        .author-avatar {
          padding: 0;
          box-shadow: 0 0 0.06rem 0.03rem rgba(0, 0, 0, 0.2);
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
        }

        .user-nick {
          margin-left: 0.2rem;
          font-size: 0.4rem;
          color: var(--main-1);
        }
      }

      .element {
        position: relative;
        height: 0.6rem;
        width: calc(100% + 0.6rem);
        margin-top: 0.3rem;
        margin-left: -0.2rem;

        .view {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 1.8rem;
          height: 0.6rem;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.1rem;
          background: var(--main-2-hs2);
          color: var(--main-1);
          border-radius: 0 0.3rem 0 0;
          transition: 0.4s ease-out;

          &:hover {

            .icon-v {
              display: none;
            }

            span {
              display: none;
            }

          }

          &:hover:before {
            content: "浏览量";
            font-size: 0.35rem;
          }
        }

        .time-box {
          position: absolute;
          bottom: 0;
          right: 0.1rem;
          width: 4.2rem;
          height: 100%;
          overflow: hidden;

          &:hover {
            .start-end {
              transform: translateX(0.2rem);
            }
          }

          .start-end {
            position: absolute;
            top: 0.1rem;
            right: 0;
            transition: 0.4s ease-out;
            white-space: nowrap;
            width: 9rem;
            transform: translateX(5rem);
          }
        }
      }
    }
  }
}
</style>